<template>
  <div class="app-container">
    <div class="ui_home_left ui_home">
      <div class="ui_home_tlt"><span>当前地图：</span>
        <el-select v-model="value" placeholder="请选择" @change="currentMap">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        *鼠标右键选中当前位置为站点</div>
      <div id="zoomBar">
        <el-button-group>
          <el-button type="primary" size="small" round @click="zoomIn">缩小</el-button>
          <el-button type="primary" size="small" round>1&nbsp;:&nbsp;{{ parseFloat(zoom).toFixed(1) }}</el-button>
          <el-button type="primary" size="small" round @click="zoomOut">放大</el-button>
        </el-button-group>
      </div>
      <div id="viewdiv" />
    </div>
    <div class="ui_home_right ui_home">
      <div class="ui_home_tlt">站点列表</div>
      <div class="ui_t_h">
        <el-table :data="tableData" style="width: 100%" :show-header="false">
          <el-table-column prop="date" label="">
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
              <div>{{ parseFloat(scope.row.x).toFixed(4) }},{{ parseFloat(scope.row.y).toFixed(4) }},{{ scope.row.yaw }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="" width="150px" align="right">
            <template scope="scope">
              <el-button size="mini" @click="editorList(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteList(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="标点管理" :visible.sync="dialogVisible" width="28%" :before-close="cacle">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item v-if="tableData.length==0 && isEditOrAdd==2" label="标点名称">
          <el-input v-model="form.name='起始点'" disabled />
        </el-form-item>
        <el-form-item v-if="tableData.length==0 && isEditOrAdd==2" label="起始点">
          <el-switch
            v-model="form.start=true"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="tableData.length!=0 && isEditOrAdd==2 " label="标点名称">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="tableData.length!=0 && isEditOrAdd==2 " label="起始点">
          <el-switch
            v-model="form.start=false"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="tableData.length!=0 && isEditOrAdd==1 && form.start==true" label="标点名称">
          <el-input v-model="form.name='起始点'" disabled />
        </el-form-item>
        <el-form-item v-if="tableData.length!=0 && isEditOrAdd==1 && form.start==true" label="起始点">
          <el-switch
            v-model="form.start=true"
            disabled
          />
        </el-form-item>
        <el-form-item v-if="tableData.length!=0 && isEditOrAdd==1 && form.start==false" label="标点名称">
          <el-input v-model="form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item v-if="tableData.length!=0 && isEditOrAdd==1 && form.start==false" label="起始点">
          <el-switch
            v-model="form.start=false"
            disabled
          />
        </el-form-item>
        <el-form-item label="角度">
          <el-input-number v-model="form.yaw" value="0" />
        </el-form-item>
        <el-form-item label="标点坐标">
          <el-input v-model="parseFloat(form.x).toFixed(4)+','+parseFloat(form.y).toFixed(4)" disabled />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cacle()">取 消</el-button>
        <el-button type="primary" @click="addOrEditPoint()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style>
.el-dialog__body{
  border: 1px solid #e8eaec;
  padding: 20px 20px 0px 20px!important;
}
</style>
<style scoped>
   .ui_t_h{
      height: calc(100vh - 190px);
      overflow-y: auto;
      position: absolute;
      width: 100%;
    }
    .ui_home{
        border:1px solid #cccccc;
        position: absolute;
        height: calc(100vh - 140px);
    }
    .ui_home_left{
        width:75%;
    }
    .ui_home_right{
        width: 22%;
        right: 10px;
    }
    .ui_home_tlt{
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        border-bottom: 1px solid #cccccc;
    }
    .ui_home_tlt span{
       font-weight: bold;
       margin-right: 5px;
    }
    #viewdiv{
        margin: 0;
        padding:0;
        height: calc(100vh - 190px);
        position:absolute;
        overflow: hidden;
        width: 100%;
    }
    #zoomBar{
      float: right;
      margin-top: -41px;
      margin-right: 20px;
    }
</style>
<script>
import ElInputNumber from '../../../node_modules/element-ui/packages/input-number/src/input-number.vue'
import { queryPoint, editPointDone, removePointDone, addPointDone, mapPreview, getConfig,listMapAll, enableMapInfo } from '@/api/map/map'
import pictureMap from '@/utils/pictureMap.js'
export default {
  components: { ElInputNumber },
  data: function() {
    return {
      form: {
        name: '',
        yaw: 0,
        start: false
      },
      tableData: [],
      dialogVisible: false,
      isEditOrAdd: 0, // 0不操作，1编辑，2新增
      pictureMapId: 0,
      zoom: 1,
      options: [],
      value: ''
    }
  },
  mounted: function() {
    this.getMap()
    this.getListMapAll()
  },
  methods: {
    init: function() {
      this.form = {
        name: '',
        yaw: 0,
        start: false
      }
      this.tableData = []
      this.dialogVisible = false
      this.pictureMapId = 0
      this.isEditOrAdd = 0 // 0不操作，1编辑，2新增
      this.zoom = 1
    },
    currentMap: function(id) {
      const param = {
        id: id
      }
      enableMapInfo(param).then(response => {
        this.init()
        this.getMap()
        this.$message({
          type: 'success',
          message: '切换成功！'
        })
      })
    },
    editorList: function(index, data) {
      //
      //
      // console.log("editData",this.tableData)
      // var that = this;
      // that.form = data;
      // that.dialogVisible = true;
      // that.isEditOrAdd = 1;
      console.log('editData', data)
      console.log('start', data.start)
      this.form.id = data.id
      this.form.mapId = data.mapId
      this.form.name = data.name
      this.form.x = data.x
      this.form.y = data.y
      this.form.yaw = data.yaw
      this.form.start = data.start
      console.log('editDataform', this.form)
      console.log('this.form.start', this.form.start)
      this.isEditOrAdd = 1
      this.dialogVisible = true
    },
    deleteList: function(index, data) {
      console.log('deletData', this.tableData)
      var that = this
      console.log('data', data)
      if (data.start) {
        this.$confirm('删除【起始点】将会删除所有站点和此地图关联的所有任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          // 点击确定的操作(调用接口)
          removePointDone(data)
          that.map.removePoints()
          that.tableData = []
          this.$message({
            type: 'success',
            message: '已全部删除！'
          })
        }).catch(() => {
          // 几点取消的提示
          this.$message({
            type: 'success',
            message: '已取消！'
          })
        })
      } else {
        this.$confirm('此操作将删除该站点和站点相关所有任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 点击确定的操作(调用接口)
          removePointDone(data)
          this.$message({
            type: 'success',
            message: '已删除！'
          })
          that.map.removePoint((data.x.toString() + data.y.toString()).replace(/[&\|\\\*^%$#@\-|\.]/g, ''))
          that.tableData.splice(index, 1)
        }).catch(() => {
          // 几点取消的提示
          this.$message({
            type: 'success',
            message: '已取消！'
          })
        })
      }
    },
    /**
         * 取消添加点位
         */
    cacle: function() {
      this.dialogVisible = false
      if (this.isEditOrAdd === 2) {
        this.map.removePoint((this.form.x.toString() + this.form.y.toString()).replace(/[&\|\\\*^%$#@\-|\.]/g, ''))
      }
    },
    /**
         * 确定添加点位
         */
    addOrEditPoint: function() {
      var that = this
      // eslint-disable-next-line eqeqeq
      if (this.form.name == '') {
        this.$message({
          type: 'success',
          message: '请输入标点名称'
        })
        return
      }
      this.dialogVisible = false
      if (that.isEditOrAdd === 2) {
        addPointDone({
          'name': this.form.name || '',
          'x': this.form.x,
          'y': this.form.y,
          'yaw': this.form.yaw,
          'start': this.form.start,
          'mapId': that.pictureMapId
        }).then(response => {
          if (response.code == 'MAP_SITE_NAME_ERROR') {
            this.$message.error(response.msg)
            console.log('MAP_SITE_NAME_ERROR')
            this.map.removePoint((this.form.x.toString() + this.form.y.toString()).replace(/[&\|\\\*^%$#@\-|\.]/g, ''))
            return
          }
          this.$message({
            type: 'success',
            message: '新增保存成功！'
          })
          queryPoint({
            'mapId': that.pictureMapId
          }).then(response => {
            response.data.forEach(function(item) {
              const itemId = (item.x.toString() + item.y.toString()).replace(/[&\|\\\*^%$#@\-|\.]/g, '')
              const formId = (that.form.x.toString() + that.form.y.toString()).replace(/[&\|\\\*^%$#@\-|\.]/g, '')
              if (itemId === formId) {
                that.tableData.push(item)
                that.map.updateContent(itemId, item.name)
              }
            })
          })
        })
      } else if (that.isEditOrAdd === 1) {
        const param = {
          'id': this.form.id,
          'name': this.form.name,
          'x': this.form.x,
          'y': this.form.y,
          'yaw': this.form.yaw,
          'start': this.form.start,
          'mapId': this.form.mapId
        }
        editPointDone(param).then(response => {
          if (response.code == 'MAP_SITE_NAME_ERROR') {
            this.$message.error(response.msg)
            return
          }
          this.$message({
            type: 'success',
            message: '编辑保存成功！'
          })
          this.tableData.forEach(function(item, index) {
            if (item.id == param.id) {
              item.name = param.name
              item.yaw = param.yaw
            }
          })
          that.map.updateContent((that.form.x.toString() + that.form.y.toString()).replace(/[&\|\\\*^%$#@\-|\.]/g, ''), that.form.name)
        })
      }
    },
    zoomIn: function() {
      this.map.zoomReduce()
      this.zoom = this.map.getScale()
    },
    zoomOut: function() {
      this.map.zoomPlus()
      this.zoom = this.map.getScale()
    },
    getPoints: function() {
      var that = this
      queryPoint({
        'mapId': that.pictureMapId
      }).then(response => {
        this.tableData = response.data
        this.map.removePoints()
        this.map.addPOIPoints(response.data)
      })
    },
    getListMapAll: function() {
      listMapAll().then(response => {
        response.data.forEach((item) => {
          const name = (!item.name && typeof (item.name) !== 'undefined' && item.name !== 0) || item.name === '' ? '未命名' : item.name
          const option = {
            value: item.id,
            // eslint-disable-next-line no-undef,eqeqeq
            label: item.id + '--' + name
          }
          this.options.push(option)
          if (item.enabled === true) {
            this.value = item.id + '--' + name
          }
        })
      })
    },
    getMap: function() {
      const that = this
      getConfig().then(response => {
        if (response.data.mapId == null) {
          this.$alert('请选择有效的地图', '暂无地图', {
            confirmButtonText: '确定'
          })
        }
        const originX = response.data.originX
        const originY = response.data.originY
        that.pictureMapId = response.data.mapId
        that.map = new pictureMap({
          viewId: 'viewdiv', // 地图ID（必填参数）
          mapImg: mapPreview(), // 地图底图（可选参数，可无底图）
          markerImg: '<i class="el-icon-location" style="color: #1890ff"></i>', // POI点的图标（可选参数）
          markerStart: '<i class="el-icon-location" style="color: green"></i>', // POI点的图标（可选参数）
          isEditor: true, // 是否开启编辑功能
          originX: originX,
          originY: originY,
          pictureMapId: that.pictureMapId,
          resolution: response.data.resolution,
          width: response.data.with,
          height: response.data.height,
          isRealSize: true,
          uploadFun: function(data) {
            that.form = data
            that.dialogVisible = true
            that.isEditOrAdd = 2
          }, // 上传POI点,自处理
          clickFun: function(data) {
            console.log('data' + data)
          }// 点击POI点所触发的事件,data数据格式{dataId:dateId,top:top,left:left,attributes:attributes};（可选参数，可以不上传）
        }, that)
        that.zoom = this.map.getScale()
        that.getPoints()
        // 加载历史点位信息
        /* that.map.addPOIPoints([{
                mapId: "20200920185349",
                name: "qwqwqw",
                x: -144.5468928,
                y: -161.488768,
                yaw:30
              }]);
              that.tableData.push({
                mapId: "20200920185349",
                name: "qwqwqw",
                x: -144.5468928,
                y: -161.488768,
                yaw:30
              })*/
      })
    }
  }
}
</script>
